<route lang="yaml">
  meta:
    title: 主页
  </route>

<script setup>
import { HomeFilled, OfficeBuilding, SuccessFilled, UserFilled, WarningFilled, WarnTriangleFilled } from '@element-plus/icons-vue'
import axios from 'axios'
import * as echarts from 'echarts'
import { size } from 'lodash-es'
import { onMounted, ref } from 'vue'

const topData = ref([])
const businessData = ref([])

const equipmentData = ref([])
const serviceXdata = ref([])
const serviceYdata = ref([])
const customerXdata = ref([])
const customerYdata = ref([])
const regionXdata = ref([])
const regionYdata = ref([])
async function fetchData() {
  // 顶部数据
  try {
    const response = await axios.post('https://www.cqwuyang.cn/ElectricManageService/index/system/statistics', {
      feedbackCode: 0,
    })
    topData.value = response.data.data

    console.log('顶部数据', topData.value)
  }
  catch (error) {
    console.error('Error fetching data:', error)
  }
  // 海康上报折线图
  try {
    const response = await axios.post('https://www.cqwuyang.cn/ElectricManageService/feedback/getFeedbackHikStatisticsWeek', {
      feedbackCode: 0,
    })
    const data = response.data.data
    // const data = []
    if (data.length === 0) {
      const today = new Date()
      serviceXdata.value = Array.from({ length: 7 }, (_, i) => {
        const date = new Date(today)
        date.setDate(today.getDate() - i)
        return date.toISOString().split('T')[0] // 格式为 YYYY-MM-DD
      })
      serviceYdata.value = Array.from({ length: 7 }).fill(0)
    }
    else {
      serviceXdata.value = data.map(item => item.dateStr)
      serviceYdata.value = data.map(item => item.feedbackNum)
    }

    console.log('海康上报折线图', data)
  }
  catch (error) {
    console.error('Error fetching data:', error)
  }
  // 业主上报折线图
  try {
    const response = await axios.post('https://www.cqwuyang.cn/ElectricManageService/feedback/getFeedbackCustomerStatisticsWeek', {
      feedbackCode: 0,
    })
    const data = response.data.data
    if (data.length === 0) {
      const today = new Date()
      customerXdata.value = Array.from({ length: 7 }, (_, i) => {
        const date = new Date(today)
        date.setDate(today.getDate() - (6 - i))
        return date.toISOString().split('T')[0] // 格式为 YYYY-MM-DD
      })
      customerYdata.value = Array.from({ length: 7 }).fill(0)
    }
    else {
      customerXdata.value = data.map(item => item.dateStr)
      customerYdata.value = data.map(item => item.feedbackNum)
    }
    console.log('业主上报折线图', data, customerXdata.value, customerYdata.value)
    console.log('customerXdata.value', customerXdata.value)
    console.log('customerYdata.value', customerYdata.value)
  }
  catch (error) {
    console.error('Error fetching data:', error)
  }
  // 饼状图
  try {
    const response = await axios.post('https://www.cqwuyang.cn/ElectricManageService/customer/getCustomerStatisticsRegion', {
      removeZero: 0,
    })
    const data = response.data.data
    regionXdata.value = data.map(item => item.regionStr)
    regionYdata.value = data.map(item => item.num)
    console.log('regionXdata.value', regionXdata.value)
    console.log('regionYdata.value', regionYdata.value)
    console.log('饼状图', data)
  }
  catch (error) {
    console.error('Error fetching data:', error)
  }
}
// 使用 ref 引用 DOM 元素
const serviceChart = ref(null)
const customerChart = ref(null)
const regionChart = ref(null)

// 初始化图表的函数
function initCharts() {
  // 初始化折线图（serviceChart 和 customerChart）
  const serviceChartInstance = echarts.init(serviceChart.value)
  const customerChartInstance = echarts.init(customerChart.value)

  const serviceLineOptions = ref({
    title: {
      text: '设备上报趋势',
      left: 'center',
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: serviceXdata.value,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '数据',
        type: 'line',
        smooth: false, // 平滑曲线
        lineStyle: {
          type: 'dashed', // 虚线
        },
        data: serviceYdata.value,
        // areaStyle: {} // 填充背景色
      },
    ],
  })
  const customerLineOptions = ref({
    title: {
      text: '业主上报趋势',
      left: 'center',
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: customerXdata.value,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '数据',
        type: 'line',
        smooth: false, // 平滑曲线
        lineStyle: {
          type: 'dashed', // 虚线
        },
        data: customerYdata.value, // 使用响应式数据
        // areaStyle: {} // 填充背景色
      },
    ],
  })

  serviceChartInstance.setOption(serviceLineOptions.value)
  customerChartInstance.setOption(customerLineOptions.value)

  // 初始化饼状图（regionChart）
  const regionChartInstance = echarts.init(regionChart.value)

  const pieOptions = ref({
    title: {
      text: '单位地区分布',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/> {b}: {c} ({d}%)',
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: regionXdata.value,
    },
    series: [
      {
        name: '区域',
        type: 'pie',
        radius: '50%',
        data: regionXdata.value.map((region, index) => ({
          value: regionYdata.value[index], // 对应的区域数据
          name: region, // 区域名称
        })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  })

  regionChartInstance.setOption(pieOptions.value)
}

onMounted(async () => {
  await fetchData() // 等待 fetchData 完成
  initCharts() // 然后再初始化图表
})
</script>

<template>
  <div style="width: 100%;height: 100%;background-color: white;">
    <div class="baseInfo">
      <div class="headTitle">
        <h3>业务数据一览</h3>
      </div>
      <div class="serviceData">
        <div class="serviceDataBlock">
          <el-icon :size="50">
            <OfficeBuilding />
          </el-icon>
          <div class="serviceDataVertical">
            <div class="serviceDataRow">
              <el-text class="mx-1" size="large">
                单位总数
              </el-text>
            </div>
            <div class="serviceDataRow">
              <el-text class="mx-1" size="large">
                {{ topData.customerNum }}
              </el-text>
            </div>
          </div>
          <div class="serviceDataVertical">
            <div class="serviceDataRow">
              <el-icon>
                <SuccessFilled />
              </el-icon><el-text class="mx-1" size="large">
                审核通过
              </el-text><el-text class="mx-1" size="normal">
                {{ topData.customerThroughNum }}
              </el-text>
            </div>
            <div class="serviceDataRow">
              <el-icon>
                <SuccessFilled />
              </el-icon><el-text class="mx-1" size="large">
                待审核
              </el-text><el-text class="mx-1" size="normal">
                {{ topData.customerWaitNum }}
              </el-text>
            </div>
            <div class="serviceDataRow">
              <el-icon>
                <SuccessFilled />
              </el-icon><el-text class="mx-1" size="large">
                审核未通过
              </el-text><el-text class="mx-1" size="normal">
                {{ topData.customerFailNum }}
              </el-text>
            </div>
          </div>
        </div>
        <div class="serviceDataBlock">
          <el-icon :size="50">
            <UserFilled />
          </el-icon>
          <div class="serviceDataVertical">
            <div class="serviceDataRow">
              <el-text class="mx-1" size="large">
                电工总数
              </el-text>
            </div>
            <div class="serviceDataRow">
              <el-text class="mx-1" size="large">
                {{ topData.electricianNum }}
              </el-text>
            </div>
          </div>
          <div class="serviceDataVertical">
            <div class="serviceDataRow">
              <el-icon>
                <SuccessFilled />
              </el-icon><el-text class="mx-1" size="large">
                审核通过
              </el-text><el-text class="mx-1" size="normal">
                {{ topData.electricianThroughNum }}
              </el-text>
            </div>
            <div class="serviceDataRow">
              <el-icon>
                <SuccessFilled />
              </el-icon><el-text class="mx-1" size="large">
                待审核
              </el-text><el-text class="mx-1" size="normal">
                {{ topData.electricianWaitNum }}
              </el-text>
            </div>
            <div class="serviceDataRow">
              <el-icon>
                <SuccessFilled />
              </el-icon><el-text class="mx-1" size="large">
                审核未通过
              </el-text><el-text class="mx-1" size="normal">
                {{ topData.electricianFailNum }}
              </el-text>
            </div>
            <div class="serviceDataRow">
              <el-icon>
                <SuccessFilled />
              </el-icon><el-text class="mx-1" size="large">
                已封禁
              </el-text><el-text class="mx-1" size="normal">
                {{ topData.electricianBanNum }}
              </el-text>
            </div>
          </div>
        </div>
        <div class="serviceDataBlock">
          <el-icon :size="50">
            <WarningFilled />
          </el-icon>
          <div class="serviceDataVertical">
            <div class="serviceDataRow">
              <el-text class="mx-1" size="large">
                报警总数(海康)
              </el-text>
            </div>
            <div class="serviceDataRow">
              <el-text class="mx-1" size="large">
                {{ topData.allWaringNum }}
              </el-text>
            </div>
          </div>
          <div class="serviceDataVertical">
            <div class="serviceDataRow">
              <el-icon>
                <SuccessFilled />
              </el-icon><el-text class="mx-1" size="large">
                已处理
              </el-text><el-text class="mx-1" size="normal">
                {{ topData.allWaringProcessedNum }}
              </el-text>
            </div>
            <div class="serviceDataRow">
              <el-icon>
                <SuccessFilled />
              </el-icon><el-text class="mx-1" size="large">
                待处理
              </el-text><el-text class="mx-1" size="normal">
                {{ topData.allWaringUntreatedNum }}
              </el-text>
            </div>
          </div>
        </div>
        <div class="serviceDataBlock">
          <el-icon :size="50">
            <WarnTriangleFilled />
          </el-icon>
          <div class="serviceDataVertical">
            <div class="serviceDataRow">
              <el-text class="mx-1" size="large">
                故障总数(海康)
              </el-text>
            </div>
            <div class="serviceDataRow">
              <el-text class="mx-1" size="large">
                {{ topData.allFaultNum }}
              </el-text>
            </div>
          </div>
          <div class="serviceDataVertical">
            <div class="serviceDataRow">
              <el-icon>
                <SuccessFilled />
              </el-icon><el-text class="mx-1" size="large">
                已处理
              </el-text><el-text class="mx-1" size="normal">
                {{ topData.allFaultProcessedNum }}
              </el-text>
            </div>
            <div class="serviceDataRow">
              <el-icon>
                <SuccessFilled />
              </el-icon><el-text class="mx-1" size="large">
                待处理
              </el-text><el-text class="mx-1" size="normal">
                {{ topData.allFaultUntreatedNum }}
              </el-text>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="reportChart">
      <div ref="serviceChart" style="width: 100%; height: 400px;" />
    </div>
    <div class="reportChart">
      <div ref="customerChart" style="width: 100%; height: 400px;" />
    </div>
    <div class="reportChart">
      <div ref="regionChart" style="width: 100%; height: 400px;" />
    </div>
  </div>
</template>

<style scoped>
.baseInfo {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 1px;
  margin-bottom: 10px;
  background-color: white;

  /* border-bottom: 2px solid #ebebeb; */
}

.headTitle {
  width: 100%;
  height: 50px;
}

.serviceData {
  display: flex;
  flex-direction: row;
  gap: 20px;
  width: 100%;
  height: 100px;

  /* background-color: rgb(113, 158, 158); */
}

.serviceDataBlock {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 23%;
  height: 100px;
  padding-left: 10px;
  border: 2px solid #ebebeb;

  /* background-color: rgb(32, 49, 81); */
}

.serviceDataVertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 40%;
  height: 80%;

  /* background-color: rgb(76, 47, 123); */
}

.serviceDataRow {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 30px;

  /* background-color: rgb(105, 30, 107); */
}
</style>
